<template>
	<div class="hello">
		<full-calendar :events="fcEvents" @eventClick='out' locale="en"></full-calendar>

	</div>
</template>

<script>
	import fullcalendar from 'vue-fullcalendar'
	var demoEvents = [{
		id:1,
		title: '事件',
		start: '2017-5-8',
		end: '2017-5-10'
	}, {
		id:2,
		title: '事件2',
		start: '2017-5-15',
		end: '2017-5-19'
	}]
	export default {
		name: '',
		components: { 'full-calendar': fullcalendar },
		props: [],
		data() {
			return {
				fcEvents: demoEvents
			}
		},
		methods: {
				out:function(event, jsEvent, pos){
					console.log(event)
				}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	li {
		display: inline-block;
		margin: 0 10px;
	}
	
	a {
		color: #42b983;
	}
</style>